<!--  -->
<template>
  <el-container>
    <el-header height="300px">
      <div class="wrap">
        <div class="img">
          <!-- <img :src="playList.coverImgUrl" alt="" /> -->
          <el-image
            :src="playList.coverImgUrl"
            fit="cover"></el-image>
        </div>
        <div class="title">
          <div class="head-name">
            <div class="name">{{ playList.name }}</div>
          </div>
          <!-- 作者信息 -->
          <div class="creator">
            <!-- 作者名 -->
            <span> Playlist by {{ creator.nickname }} </span>
            <!-- 创建时间 -->
            <div>歌单于 {{ playList.createTime | dateFormats }} 创建</div>
          </div>
          <div class="intro">
            <div>
              {{ playList.description }}
            </div>
          </div>
          <div class="button">
            <el-button
              @click="allPlays"
              type="primary"
              class="iconfont icon-24gf-play play"
            >
              播放</el-button
            >
            <el-button
              class="iconfont icon-shoucang2 shoucang"
              :disabled="loginStatus !== 'true'"
              v-if="!playLists.subscribed"
              @click="subscribe(playList.id)"
            >
            </el-button>
            <el-button
              @click="Nsubscribe(playList.id)"
              v-else
              class="iconfont icon-shoucang1 shoucang"
            >
            </el-button>
          </div>
        </div>
      </div>
    </el-header>
  </el-container>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
import { getSubscribe } from "util/findMusic";
export default {
  name: "",
  props: {
    //歌单信息
    playList: [],
    //作者信息
    creator: {},
    // 歌曲详情
    songsDetail: [],
  },
  data() {
    return {
      isCollect: false,
      playLists: {},
    };
  },
  watch: {
    playList(newVal) {
      this.playLists = newVal;
    },
  },
  computed: {
    ...mapGetters("musicPlay", [
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
    ]),
    ...mapGetters("userInfo", ["loginStatus"]),
  },
  methods: {
    //全部播放
    allPlays() {
      this.$store.dispatch("musicPlay/saveSongListId", this.playList.id);
      this.$store.dispatch(
        "musicPlay/saveSongId",
        this.playList.trackIds[0].id
      );
    },
    share() {
      this.$message("此功能后续开发中，敬请期待哦");
    },
    //点击收藏
    async subscribe(id) {
      let { data } = await getSubscribe(1, id);
      if (data.code == "200") {
        this.$message("收藏成功");
        this.playLists.subscribed = true;
      }
    },
    //取消收藏
    async Nsubscribes(id) {
      let { data } = await getSubscribe(2, id);
      if (data.code == "200") {
        this.playLists.subscribed = false;
        this.$message({
          type: "success",
          message: "取消成功!",
        });
      }
    },
    Nsubscribe(id) {
      this.$confirm("是否取消收藏?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.Nsubscribes(id);
        })
        .catch(() => {});
    },
    toUser(id) {
      this.$router.push("/userInfo/" + id);
    },
  },
};
</script>

<style lang='less' scoped>
.el-header {
  margin-top: 20px;
  padding: 0 5.25rem;
  .wrap {
    padding: 0 15px;
    display: flex;
    height: 100%;
    .img .el-image {
      width: 280px;
      height: 280px;
      /* height: 100%; */
      border-radius: 10px;
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(0, 0, 0, 0.04);
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 40px;
      .name {
        display: inline-block;
        font-weight: 600;
        font-size: 35px;
      }
      .creator {
        span {
          font-size: 17px;
        }
        div {
          margin-top: 5px;
          font-size: 14px;
          color: rgb(121, 118, 118);
        }
      }
      .intro {
        div {
          text-align: justify;
          text-justify: inter-ideograph;
          font-size: 15px;
          height: 60px;
          color: rgb(121, 118, 118);
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
      }
      .button {
        display: flex;
        .play {
          background-color: #eaeffd;
          border: none;
          color: #335eea;
          font-size: 17px;
          font-weight: 600;
        }
        .play:hover {
          transform: scale(1.1);
        }
        .shoucang:hover {
          transform: scale(1.1);
        }
        .shoucang {
          background-color: rgb(224, 219, 219);
          border: none;
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #333;
        }
      }
    }
  }
}
</style>